<template>
  <el-card class="box-card">
   <bread data1='商品管理' data2='商品列表'></bread>
    <el-row style="margin-top:20px">
      <!-- 搜索 -->
      <el-col>
        <el-input
          placeholder="请输入内容"
          v-model="query"
          class="inputselect"
          clearable
          @clear="handleClear"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="searchGoods"
          ></el-button>
        </el-input>
        <!-- 添加商品 -->
        <el-button
          type="success"
          icon="el-icon-user"
          class="addusers"
          @click=" $router.push({name:'goodsadd'})"
          >添加商品</el-button>
      </el-col>
      <el-table :data="goodslist" style="width: 100%" height='380px'>
        <el-table-column type="index" label="#" width="50"> </el-table-column>
        <el-table-column prop="goods_name" label="商品名称" width='500px' >
        </el-table-column>
        <el-table-column prop="goods_price" label="商品价格(元)" width='100px'> </el-table-column>
        <el-table-column prop="goods_number" label="商品数量"  width='80px'> </el-table-column>
        <el-table-column label="创建日期" >
          <template v-slot="userlist">
            {{ userlist.row.add_time | fmtdate }}
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" >
          <template v-slot="scope">
            <el-row>
              <el-button
                type="primary"
                icon="el-icon-edit"
                circle
                size="mini"
                plain
                @click="editorGoods(scope.row)"
              ></el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                size="mini"
                plain
                @click="delgoods(scope.row.goods_id)"
              ></el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagenum"
      :page-sizes="[50,100,150, 200]"
      :page-size="2"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <!-- 对话框 -->
 
    <!-- 用户信息修改对话框 -->
    <el-dialog title="修改用户" :visible.sync="editorShow">
      <el-form :model="editorForm">
        <el-form-item label="商品名称" :label-width="formLabelWidth">
          <el-input
            v-model="editorForm.goods_name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="价格" :label-width="formLabelWidth">
          <el-input v-model="editorForm.goods_price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="数量" :label-width="formLabelWidth">
          <el-input v-model="editorForm.goods_number" autocomplete="off"></el-input>
        </el-form-item>
         <el-form-item label="重量" :label-width="formLabelWidth">
          <el-input v-model="editorForm.goods_weight" autocomplete="off"></el-input>
        </el-form-item>
         <!-- <el-form-item label="介绍" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="form.goods_introduce"></el-input>
        </el-form-item>
          <el-form-item label="上传的图片临时路径" :label-width="formLabelWidth">
          <el-input v-model="editorForm.pics" autocomplete="off"></el-input>
        </el-form-item>
          <el-form-item label="商品的参数" :label-width="formLabelWidth">
          <el-input v-model="editorForm.attrs" autocomplete="off"></el-input>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editorShow = false">取 消</el-button>
        <el-button type="primary" @click="handleEditor">确 定</el-button>
      </div>
    </el-dialog>

  </el-card>
</template>
<script>
export default {
  data () {
    return {
      query: '', 
      pagenum: 1, // 从第几页开始
      pagesize: 50, // 每页有几个
      total: -1, // 总数
      // 表格中的数据
      goodslist: [],
      // 添加对话框属性
      editorShow: false,
      formLabelWidth: '120px',
      currentRoleId: -1,
      form: {
        username: '',
        password: '',
        email: '',
        mobile: ''
      },
      editorForm: {},
    }
  },
  created () {
    this.getGoodslist()
  },
  methods: {
    // 修改商品信息
     async editorGoods (goods) {
      this.editorShow = true
      const res = await this.$http.get(`goods/${goods.goods_id}`)
      this.editorForm = res.data.data
    },
    async handleEditor () {
      const res = await this.$http.put(
        `goods/${this.editorForm.goods_id}`,
        this.editorForm)
      const {
        meta: { msg, status }
      } = res.data
      if (status === 200) {
        this.editorShow = false
        this.getGoodslist()
        this.$message.success(msg)
      } else {
        this.$message.warning(msg)
      }
    },
    // 删除商品
    delgoods (goodsId) {
      this.$confirm('是否删除改用户?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
          const res = await this.$http.delete(`goods/${goodsId}`)
          const {
            meta: { msg, status }
          } = res.data
          if (status === 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.pagenum = 1
            console.log(res)
            this.getGoodslist()
            return
          } else {
            this.$message.error(msg)
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 搜索商品
     searchGoods () {
      if (!this.query) {
        this.$message.error('输入的商品名不能为空')
        return
      }
     this.getGoodslist()
    },
    // 清空输入框内容，重新加载内容
    handleClear () {
      this.getGoodslist()
    },
    handleSizeChange (val) {
      // pagesize 每页条数改变的时候触发 val 每页条数
      // console.log(`每页 ${val} 条`);
      this.pagesize = val
      this.getGoodslist()
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`);
      this.pagenum = val
      this.getGoodslist()
    },
    // 显示商品信息
    async getGoodslist () {
      const res = await this.$http.get(`goods?query=${this.query}&pagenum=${this.pagenum}&pagesize=${this.pagesize}`
      )
      const {
        meta: { status },
        data: { goods, total }
      } = res.data
      // console.log(users);
      if (status === 200) {
        this.goodslist = goods
        this.total = total
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.box-card {
  height: 100%;
}
.inputselect {
  width: 330px;
}
.addusers {
  margin-left: 5px;
}
</style>
